import { h, VNode } from 'snabbdom';
import { IDomEditor, SlateElement } from '@wangeditor/editor';

/**
 * 渲染“附件”元素到编辑器
 * @param elem 附件元素，即上文的 myResume
 * @param children 元素子节点，void 元素可忽略
 * @param editor 编辑器实例
 * @returns vnode 节点（通过 snabbdom.js 的 h 函数生成）
 */
function renderAttachment(elem, children, editor) {
  // 获取“附件”的数据，参考上文 myResume 数据结构
  const { fileName = '', link = '' } = elem;

  // 附件 icon 图标 vnode
  const iconVnode = h(
    // HTML tag
    'img',
    // HTML 属性
    {
      props: { src: 'xxxx.png' }, // HTML 属性，驼峰式写法
      style: { width: '1em', marginRight: '0.1em' } // HTML style ，驼峰式写法
    }
    // img 没有子节点，所以第三个参数不用写
  );

  // 附件元素 vnode
  const attachVnode = h(
    // HTML tag
    'p',
    // HTML 属性、样式、事件
    {
      props: { contentEditable: false }, // HTML 属性，驼峰式写法
      style: { display: 'inline-block', marginTop: '30px' }, // style ，驼峰式写法
      on: { click() { console.log('clicked', link); } }
    },
    // 子节点
    [iconVnode, fileName]
  );

  return attachVnode;
}